<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://1stjs.googlecode.com/svn/trunk/fw4/" />
<title>Untitled Document</title>
<script type="text/javascript" src="1st.js"></script>
</head>

<body>
<h3>卡通幻灯片示例</h3>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px;}
#sbox02{position:relative;padding:6px;width:390px;height:304px;border:1px solid #ccc;line-height:2;}
#sbox02 .title{position:absolute;top:223px;z-index:2;overflow:hidden;width:390px;height:28px;}
#sbox02 .title p{position:absolute;top:28px;width:390px;height:28px; line-height:28px; background:#000;color:#fff;text-indent:6px;opacity:0.6;filter:alpha(opacity=60);}
#sbox02 .panel{position:relative;height:245px;overflow:hidden;}
#sbox02 .panel img{border:0;width:390px;height:245px;}
#sbox02 .tab{height:62px;}
#sbox02 .tab span{cursor:pointer;float:left;margin:4px 2px;padding:2px;border:1px solid #ccc;}
#sbox02 .tab span.focus{border-color:green;}
#sbox02 .tab img{display:block;width:68px;height:48px;}
</style>
<div id="sbox02">
	<div class="title">
		<p style="top:0;">《福娃奥运漫游记》获动漫大赛最佳作品奖</p>
		<p>超级插画设计 3D机器人与平面相结合</p>
		<p>洁净舒适的XP桌面壁纸 轻松愉快的环境</p>
		<p>室内装修三维设计 创造简洁舒适</p>
		<p>世界上令人叹为观止的仿真的机器人</p>
	</div>
	<div class="panel">
		<div class="wrap">
			<a href="javascript:void(0);"><img src="data/img/slides/cartoon/01.jpg"/></a>
			<a href="javascript:void(0);"><img src="data/img/slides/cartoon/02.jpg"/></a>
			<a href="javascript:void(0);"><img src="data/img/slides/cartoon/03.jpg"/></a>
			<a href="javascript:void(0);"><img src="data/img/slides/cartoon/04.jpg"/></a>
			<a href="javascript:void(0);"><img src="data/img/slides/cartoon/05.jpg"/></a>
		</div>
	</div>
	<div class="tab">
		<span class="focus"><img src="data/img/slides/cartoon/01.jpg"/></span>
		<span><img src="data/img/slides/cartoon/02.jpg"/></span>
		<span><img src="data/img/slides/cartoon/03.jpg"/></span>
		<span><img src="data/img/slides/cartoon/04.jpg"/></span>
		<span><img src="data/img/slides/cartoon/05.jpg"/></span>
	</div>
</div>

<script type="text/javascript">
F("sbox02").slides({
	panel: "scrollLeft",			   
	autoplay: 2000,
	title: function(me){
		me.title.item(me.oldIndex).anime({top:28, duration:300, after:function(){
			me.title.item(me.nowIndex).anime({top:0, duration:300});
		}});
	}
});
</script>

</body>
</html>
